<template>
    <Header />
    <!-- 手机版的导航栏 -->
    <div class="orderBox-phone hidden-sm-and-up">
        <titleBar title="2024 年广州会展业创新发展峰会" style="justify-content: center;" />
        <div class="pd10">
            <div class="bdr10 bgFFF pd10 flex-between items-center">
                <div class="flex">
                    <img src="../assets/svgs/hotelLogo.svg" alt="">
                    <div class="ml10">
                        深圳海棠湾君悦酒店
                    </div>
                </div>
                <div class="flex-aliign-center flex-right ml30">
                    <img src="../assets/svgs/add.svg" class="cursor " alt="">
                    <div class="mlr5">
                        2 间
                    </div>
                    <img src="../assets/svgs/minus.svg" class="cursor " alt="">
                </div>

            </div>
            <!-- 房间1 -->
            <div class=" mt10">
                <div class="order-item-box  mb10 bdr10 bgFFF" v-for="(item,index) in 2" :key="index">
                    <div class="order-item pd20">
                        <div class="order-item-title" style="color: #356CEB;font-weight: 600;font-size: 18px;">房间{{
                            index + 1 }}</div>

                    </div>

                    <div class="room-info plr20 flex-between  mb10">
                        <div>
                            <img src="../static/dh.jpg" class="imgSize100" alt="">
                        </div>
                        <div>
                            <div class="room-name bold fz16">儒雅大床房/含早餐</div>
                            <div class="room-name color817 fz14">双床 含早餐 免费上网 无班车</div>
                            <div class="fz14">
                                <div>3月8日 周五 —— 3月11日 周一</div>
                                <div>共 3 晚</div>
                            </div>
                            <div class="fz14">
                                到店时间3月8日 14：00
                            </div>
                        </div>
                    </div>
                    <div class="pd20">
                        <div class="order-item-title" style="color: #356CEB;font-weight: 600;font-size: 18px;">入住信息
                        </div>
                        <div class="flex-between">
                            <div>入住人姓名1</div>
                            <div><input type="text" style="width: 180px;" class="input-border"></div>
                            <div><img src="../assets/svgs/contactPerson.svg" alt=""></div>
                        </div>
                        <div class="flex-between">
                            <div>入住人电话1</div>
                            <div><input type="text" style="width: 180px;" class="input-border"></div>
                            <div><img src="../assets/svgs/contactPerson.svg" alt=""></div>
                        </div>
                        <el-tag class="mtb10" type="warning">请输入住客姓名+手机号，每间需填2人，名字不可重复</el-tag>
                        <div class="flex-between">
                            <div>入住人姓名2</div>
                            <div><input type="text" style="width: 180px;" class="input-border"></div>
                            <div><img src="../assets/svgs/contactPerson.svg" alt=""></div>
                        </div>
                        <div class="flex-between">
                            <div>入住人电话2</div>
                            <div><input type="text" style="width: 180px;" class="input-border"></div>
                            <div><img src="../assets/svgs/contactPerson.svg" alt=""></div>
                        </div>
                    </div>



                    <!-- <div class="price">
                        总计￥2073.00
                    </div> -->

                </div>
            </div>
            <div class="pd20 mt10 bgFFF bdr10">
                <div class="order-item">
                    <div class="order-item-title" style="color: #356CEB;font-weight: 600;font-size: 18px;">订单信息
                    </div>

                </div>

                <div class="contactPerson plr20 ">
                    <div class="flex-between mb20">
                        <div>单位</div>
                        <div>北京子杰跳动科技</div>
                    </div>
                    <div class="flex-between mb20">
                        <div>邮箱</div>
                        <div>bjzjtb.wxs@163.com</div>
                    </div>
                    <div class="flex-between mb20">
                        <div>联系人</div>
                        <div>吴星士</div>
                    </div>
                    <div class="flex-between mb20">
                        <div>联系人手机号</div>
                        <div>18878787878</div>
                    </div>
                </div>
            </div>
            <div class="pd20 mt10 bgFFF bdr10">
                <div class="order-item-title mb10" style="color: #356CEB;font-weight: 600;font-size: 18px;">订单信息
                </div>
                <div class="flex-between">
                    <div>促销优惠卷</div>
                    <div style="color: #FF934A;display: flex;align-items: center;">3张优惠卷可用
                        <el-icon style="margin-left: 5px;">
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
            </div>
            <div class="pd20 mt10 bgFFF bdr10">
                <div class="order-item-title mb10" style="color: #356CEB;font-weight: 600;font-size: 18px;">费用说明
                </div>
                <div class="flex-between">
                    <div>所有费用客人到店时支付给酒店</div>
                </div>
            </div>
            <div class="pd20 mt10 bgFFF bdr10 mb30">
                <div class="order-item-title mb10" style="color: #356CEB;font-weight: 600;font-size: 18px;">退款说明
                </div>
                <div class="flex-between">
                    <div>入住48小时后原路退回</div>
                </div>
            </div>
            <!-- 底部提交订单按钮 -->

        </div>
        <div class="bgFFF flex-between pd20 " style="height: 60px;">
            <div class="color365 fz12">
                总计 <span class="fz18 bold">1200元</span>
            </div>
            <div>
                <router-link to="/myOrder">
                    <el-button type="primary" class="bg-color-main">提交订单</el-button>
                </router-link>
                <!-- <el-button type="primary" class="bg-color-main">提交订单</el-button> -->
            </div>
        </div>
    </div>


    <!-- PC端 -->
    <div class="orderBox hidden-xs-only">
        <div class="flex-aliign-center pd20">
            <div class="hotelName bold fz18">
                北京凯盛国际大酒店
            </div>
            <div class="ml10">
                <el-rate disabled size="large" v-model="hotelStar" />
            </div>
        </div>
        <div class="topbg flex-aliign-center pd20">
            <div class="flex column">
                <div class="hotelAddress bold mb5 fz16">
                    标准大床房(含双早)
                </div>
                <div class="hotelAddress color92 mb5 fz12">
                    北京市东城区东直门外大街1号
                </div>

                <div class="hotelAddress color92 fz12">
                    2人 1张1.8米大床 双人早餐
                </div>
            </div>
        </div>
        <div class="dashLine"></div>
        <div class="pd20" style="padding-bottom: 0px;">
            <div class="bold mb5 fz16">
                住前须知
            </div>
            <div class="hotelAddress color92 fz12">
                根据《北京市宾馆不得主动提供的一次性用品目录》相关规定，自2020年5月1日起，宾馆不得主动提供一次性用品，目录含:牙刷、梳子、浴擦、剃须刀、指甲锉、鞋擦。如您需要可联系酒店索取。
            </div>
            <div v-for="(item,index) in 2" :key="index">
                <div class="roomPersonInfo flex items-flex-start mt10 fz12" style="justify-content: space-between;">
                    <div class="flex column">
                        <div class="mb5">序号</div>
                        <div>{{ index + 1 }}</div>
                    </div>
                    <div class="flex column">
                        <div class="mb5">房型</div>
                        <!-- <el-dropdown>
                            <el-button type="plain">
                                双人标间<el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>单人大床房</el-dropdown-item>
                                    <el-dropdown-item>豪华大床房</el-dropdown-item>
                                    <el-dropdown-item>商务大床房</el-dropdown-item>
                                    <el-dropdown-item>豪华双床房</el-dropdown-item>
    
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown> -->
                        <el-select v-model="value" placeholder="Select" style="width: 120px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                                :disabled="item.disabled" />
                        </el-select>
                    </div>
                    <div class="flex column">
                        <div class="mb5">入住人姓名1</div>
                        <div>
                            <el-input v-model="input" style="width: 100px;" placeholder="请输入" />
                        </div>
                    </div>
                    <div class="flex column">
                        <div class="mb5">入住人联系方式1</div>
                        <div>
                            <el-input v-model="input" style="width: 100px;" placeholder="请输入" />
                        </div>
                    </div>
                    <div class="flex column">
                        <div class="mb5">入住人姓名2</div>
                        <div>
                            <el-input v-model="input" style="width: 100px;" placeholder="请输入" />
                        </div>
                    </div>
                    <div class="flex column">
                        <div class="mb5">入住人联系方式2</div>
                        <div>
                            <el-input v-model="input" style="width: 100px;" placeholder="请输入" />
                        </div>
                    </div>
                    <div class="flex column flex-jus-center">
                        <div class="mb5">入/离店日期</div>
                        <div>
                            <el-date-picker v-model="roomDate1" type="date" style="width: 120px;" placeholder="入住"
                                :size="size" />
                            <span class="ml5 mr5">至</span>
                            <el-date-picker v-model="roomDate2" type="date" style="width: 120px;" placeholder="离店"
                                :size="size" />

                        </div>
                    </div>
                    <div class="flex column">
                        <div class="mb5">到店时间</div>
                        <div>
                            <el-date-picker v-model="roomDate3" type="date" style="width: 120px;" placeholder="入住"
                                :size="size" />

                        </div>
                    </div>
                </div>
                <div class="dashLine mt20 mb20"></div>
            </div>


        </div>
        <div class="infoTotal pd20 flex-between fz14 bold" style="padding-top: 0px;">
            <div>总计信息</div>
            <div class="flex gap20">
                <div>
                    房费合计:￥1000.00
                </div>
                <div>其他费用:￥0.00</div>
                <div>费用总计:￥1000.00</div>
                <div>应付房费:￥1000.00</div>
                <div>本单可获积分：10</div>
            </div>
        </div>
        <div class="bottomInfo pd20">
            <div class="fz14 bold">订单信息</div>
            <div class="orderPerson pd20 bgFFF mt10 bdr5 flex gap20">
                <div class="fz12">
                    <div class="mb5">单位</div>
                    <div>

                        <el-input v-model="input" style="width: 150px;" placeholder="请输入" />
                    </div>
                </div>
                <div class="fz12">
                    <div class="mb5">邮箱</div>
                    <div>

                        <el-input v-model="input" style="width: 150px;" placeholder="请输入" />
                    </div>
                </div>
                <div class="fz12">
                    <div class="mb5">联系人</div>
                    <div>

                        <el-input v-model="input" style="width: 150px;" placeholder="请输入" />
                    </div>
                </div>
                <div class="fz12">
                    <div class="mb5">联系人手机号</div>
                    <div>

                        <el-input v-model="input" style="width: 150px;" placeholder="请输入" />
                    </div>
                </div>

            </div>
            <div class="mt20 flex-between">
                <div class="bgFFF pdlr20 bdr5 pdtb10" style="width: 350px;">
                    <div class="bold mb5" style="color: #1890FF;">本单可享</div>
                    <div class="flex-between fz12">
                        <div>促销优惠卷</div>
                        <div style="color: #FF934A;display: flex;align-items: center;">3张优惠卷可用
                            <el-icon style="margin-left: 5px;">
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </div>
                <div class="bgFFF pdlr20 bdr5 pdtb10" style="width: 350px;">
                    <div class="bold mb5" style="color: #1890FF;">退款说明</div>
                    <div class="flex-between fz12">
                        <div>入住48小时后原路退回</div>

                    </div>
                </div>
                <div class="bgFFF pdlr20 bdr5 pdtb10" style="width: 350px;">
                    <div class="bold mb5" style="color: #1890FF;">费用说明</div>
                    <div class="flex-between fz12">
                        <div>所有费用客人到店时支付给酒店</div>

                    </div>
                </div>
            </div>
            <div class="mt20 flex ">
                <!-- 单选按钮 -->


                <div class="pdlr20 pdtb10 bdr5 bgFFF" style="margin-right: 24px;">
                    <div class="mb10">
                        支付方式
                    </div>
                    <div class="flex">
                        <label class="flex mr30">
                            <input type="radio" v-model="selected" value="option1">
                            <div class="flex-center column ml10"><img src="../assets/svgs/wechat.svg"
                                    mode="scaleToFill" />
                                <div>微信支付</div>
                            </div>
                        </label>
                        <label class="flex mr30">
                            <input type="radio" v-model="selected" value="option2">
                            <div class="flex-center column ml10">
                                <img src="../assets/svgs/zhifubao.svg" mode="scaleToFill" />
                                <div class="mt10">支付宝</div>
                            </div>
                        </label>
                        <label class="flex mr30">
                            <input type="radio" v-model="selected" value="option3">
                            <div class="flex-center column ml10"><img src="../assets/svgs/jiudianqiantai.svg"
                                    mode="scaleToFill" />
                                <div class="mt10">酒店前台付款</div>
                            </div>
                        </label>
                        <label class="flex mr30">
                            <input type="radio" v-model="selected" value="option4">
                            <div class="flex-center column ml10">
                                <img src="../assets/svgs/duigonzhuanzhang.svg" mode="scaleToFill" />
                                <div class="mt10">对公转账</div>
                            </div>
                        </label>
                        <!-- <p>你选择的选项是：{{ selected }}</p> -->
                    </div>
                    <!-- <el-radio-group v-model="radio1" class="ml-4 flex-center" style="width: 100%;height: 100px;">
                        <el-radio value="1" size="large">
                            <div class="flex-center column"><img src="../assets/svgs/wechat.svg" mode="scaleToFill" />
                                <div>微信支付</div>
                            </div>
                        </el-radio>
                        <el-radio value="2" size="large">
                            <div class="flex-center column">
                                <img src="../assets/svgs/zhifubao.svg" mode="scaleToFill" />
                                <div class="mt10">支付宝</div>
                            </div>
                        </el-radio>
                        <el-radio value="3" size="large">
                            <div class="flex-center column"><img src="../assets/svgs/jiudianqiantai.svg"
                                    mode="scaleToFill" />
                                <div class="mt10">酒店前台付款</div>
                            </div>
                        </el-radio>
                        <el-radio value="4" size="large">
                            <div class="flex-center column">
                                <img src="../assets/svgs/duigonzhuanzhang.svg" mode="scaleToFill" />
                                <div class="mt10">对公转账</div>
                            </div>
                        </el-radio>
                    </el-radio-group> -->
                </div>
                <!-- <div class="pdlr20 pdtb10 bdr5 bgFFF" style="width: 350px;">
                    <div class="mb10">
                        线下支付
                    </div>
                    <el-radio-group v-model="radio1" class="ml-4 flex-center" style="width: 100%;height: 100px;">
                        <el-radio value="1" size="large">
                            <div class="flex-center column"><img src="../assets/svgs/jiudianqiantai.svg"
                                    mode="scaleToFill" />
                                <div class="mt10">酒店前台付款</div>
                            </div>
                        </el-radio>
                        <el-radio value="2" size="large">
                            <div class="flex-center column">
                                <img src="../assets/svgs/duigonzhuanzhang.svg" mode="scaleToFill" />
                                <div class="mt10">对公转账</div>
                            </div>
                        </el-radio>
                    </el-radio-group>
                </div> -->

            </div>
            <div class="flex-right mt20 items-center">
                <div class="flex-center column cursor"><img src="../assets/svgs/share.svg" mode="scaleToFill" />
                    <div class="fz12">
                        分享好友
                    </div>
                </div>
                <div class="ml20">
                    <router-link to="/myOrder">
                        <el-button size="large" type="primary" style="width: 150px;">去支付</el-button>
                    </router-link>
                </div>
            </div>

        </div>

    </div>
</template>
<script lang="ts" setup>
    import Header from '@/components/Header.vue'
    import { ref } from 'vue'
    import titleBar from '@/components/titleBar.vue'
    const hotelStar = ref(4)
    const roomDate1 = ref('')
    const roomDate2 = ref('')
    const roomDate3 = ref('')
    const selected = ref('');
    const radio1 = ref('1')
    const input = ref('')

    // 选择房型
    const value = ref('单人标间')
    const options = [
        {
            value: 'Option1',
            label: '单人标间',
        },
        {
            value: 'Option2',
            label: '双人大床房',
            disabled: true,
        },
        {
            value: 'Option3',
            label: '豪华大床房',
        },
        {
            value: 'Option4',
            label: '商户大床房',
        },
        {
            value: 'Option5',
            label: '商务双床房',
        },
    ]
    const handleClick = () => {
        // eslint-disable-next-line no-aler   t
        alert('button click')
    }
</script>
<style lang="scss" scoped>
    @import '@/assets/variables.scss';

    .orderBox {
        max-width: $border-primary-max-width;
        margin: 30px auto;
        border: 1px solid #ccc;

        .topbg {
            background-color: #F5F7FA;
            min-height: 50px;
        }

        .bottomInfo {
            background-color: #F5F7FA;
        }
    }

    .orderBox-phone {
        max-width: $border-primary-max-width;
        margin: 0px auto;
        border: 1px solid #ccc;
        background-color: #F4F4F4;

        .topbg {
            background-color: #F5F7FA;
            min-height: 50px;
        }

        .bottomInfo {
            background-color: #F5F7FA;
        }

        .order-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 5px;

            .order-item-title {}

            .order-item-date {
                width: 350px;


            }

            .order-item-night {
                width: 280px;


            }

            .order-item-cancel {

                cursor: pointer;
                color: #ccc;
            }
        }
    }
</style>